<template>
  <view>
    <uni-forms ref="valiForm"  >
		<uni-forms-item label="">
		    <uni-file-picker limit="9" :value="fileLists" title="维修单据":image-styles="imageStyles"
		        :sourceType="sourceType" @select="select"
		         @delete="deletea" />
		</uni-forms-item>
		</uni-forms>
		<button @click="submit">确认</button>
  </view>
</template>

<script>
	import config from '@/config'
	import {
		getToken
	} from '@/utils/auth'
export default {
  data() {
    return {
     // 图片回显
     fileLists: [],
     // 上传图片的样式
     imageStyles: {
             width: 90,
             height: 90,
			 "backgroundcolor": "#1cbbcc",
			 "border": { // 如果为 Boolean 值，可以控制边框显示与否
			 	"color": "#5a5a5a", // 边框颜色
			 	"width": "2px", // 边框宽度
			 	"style": "solid", // 边框样式
			 	"radius": "5%",
			 	// 边框圆角，支持百分比
			 }
             },
     // uni.chooseImage值，从相册选择，拍摄
     sourceType: ['album', 'camera'],
    }
  },
  methods:{
	  submit(){
		 uni.showToast({
		 	title: '提交成功',
		 	duration: 2000
		 });
		 setTimeout(() => {
		 	uni.navigateTo({
		 		url: '../../pagesA/task/task'
		 	})
		 },200)
	  },
	  // 获取上传状态
	              select(e) {
	                  console.log('选择文件：', e)
	                  // 解决file对象取值问题
	                  // h5上传-需要文件file对象
	  				// const tempFilePaths = e.tempFiles[0].file;
	  				// 微信小程序上传-需要微信临时提供临时地址
	  				const tempFilePaths = e.tempFilePaths;
					console.log(tempFilePaths)
					const arr=tempFilePaths.map((item,index)=>{
						uni.uploadFile({
						    url: config.baseUrl + `/common/wxUploads`,
						    // 要上传文件对象-h5和微信小程序上传参数不一样只能存在一个
						    // H5上传
							  					// file: tempFilePaths,
							  					// 微信小程序上传
							  					filePath: tempFilePaths[index],
						    //文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
						    name: 'files',
						    // 请求头设置
						    // 我们是需要token和用户id登录时存从uni-app数据存储中取
						    header: {
						    	Authorization: 'Bearer ' + getToken()
						    },
						    // 成功函数
						    success: (res) => {
						        // uni.uploadFile默认在外面包了一层data
						        console.log('上传成功', res.data);
						// uni.uploadFile返回来的结果默认是JSON格式字符串，需要用JSON.parse转换成js对象
						        console.log('上传数据转换',JSON.parse(res.data));
						        // 取到文档服务器的值
						        let uploaddata = JSON.parse(res.data)
						        let x = {}
						        // 下面3个值是uni-app规定的一个不能少
						        x.url = uploaddata.data.urls
						        x.extname = ''
								x.str=uploaddata.data.fileNames
						        x.name = uploaddata.data.newFileNames
						        this.fileLists.push(x)
													  console.log(this.fileLists)
						    },
						    // 失败提示用户重新上传
						    fail: error => {
						        console.log('失败', error);
						    }
						})
					})
					console.log(this.fileLists)
	                 
	              },
				   // 删除
				              deletea(e) {
				                console.log('删除图片', e);
				                const num = this.fileLists.findIndex(item => item.url === e.tempFilePath);
				                	 console.log(num)
				                	    this.fileLists.splice(num, 1);
				                	console.log(this.fileLists)
								  
				              },
	              
  }
  
}
</script>

<style>

</style>
